import BaseFrame from './BaseFrame';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import vertexShader from '@/shader/fresnel/vert.glsl';
import fragmentShader from '@/shader/fresnel/frag.glsl';
export default class Fresnel extends BaseFrame {
	constructor() {
		super();
		this.initScene();
	}
	initScene() {
		this.camera.position.set(4, 0.5, 1);
		this.controls.target.set(0, 0.5, 0);
		this.groundMesh.visible = false;
		let gltfLoader = new GLTFLoader();
		gltfLoader.load('/model/cat.gltf', (gltf) => {
			let model = gltf.scene;
			this.shaderMaterial = new THREE.ShaderMaterial({
				uniforms: {
					//强度
					uStrength: {
						value: 2,
					},
					//厚度
					uThickness: {
						value: 1.4,
					},
					//颜色
					uColor: {
						value: new THREE.Color(0x46c2f7),
					},
					//时间变量
					uTime: {
						value: 0,
					},
				},
				vertexShader: vertexShader,
				fragmentShader: fragmentShader,
				transparent: true,
				flatShading: false,
				blending: THREE.AdditiveBlending,
			});
			let mesh = new THREE.Mesh(model.children[0].geometry, this.shaderMaterial);
			// mesh.rotation.x = -Math.PI / 2;
			this.scene.add(mesh);
			this.initGui();
			this.renderOnce();
		});
	}
	initGui() {
		this.gui.add(this.shaderMaterial.uniforms.uStrength, 'value').min(0).max(4).step(0.01).name('强度');
		this.gui.add(this.shaderMaterial.uniforms.uThickness, 'value').min(0).max(4).step(0.01).name('厚度');
		this.gui.addColor(this.shaderMaterial.uniforms.uColor, 'value').name('颜色');
	}
	update() {
		if (this.shaderMaterial) {
			this.shaderMaterial.uniforms.uTime.value = this.clock.getElapsedTime();
		}
	}
}
